<script setup>
import OImage from "../setting/Images.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Slider from "../setting/Slider.vue";
import { newRandomUid } from "@/utils";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  uid: {
    type: String,
    default: "",
  },
  controlData: {
    type: Object,
    required: true,
  },
});

const emits = defineEmits(["update:config", "change"])
 const form = ref({
    $removeable: true,
    $show: true,
    $positionType: "relative",
    $position:{left:0,top:0},
    activeName: 0,
    isView: false, // 默认不显示弹窗
    signUpInformation: 1, // 报名信息
    signUpInformationPopup: 0, // 报名信息是否为弹窗框
    signUpButtonBg: "./imagesStatic/activity/toSignUp_btn.png", // 报名按钮bg
    signUpButtonSize: { width: 357, height: 150 }, // 报名按钮尺寸
    signUpButtonPosition: { top: 0, left: 9 }, // 报名按钮的定位

    signUpSuccessButtonBg: "./imagesStatic/activity/toSignUp_success.png", // 报名完成按钮bg
    signUpSuccessButtonSize: { width: 357, height: 366 }, // 报名完成按钮尺寸
    signUpSuccessButtonPosition: { top: 0, left: 9 }, // 报名完成按钮的定位


    contentSize: { width: 357, height: 366 }, // 内容尺寸
    contentPosition: { top: 150, left: 9 }, // 内容的定位
    contentBgColor: '#eee', // 区域背景色
    contentRadius: 5, // 区域圆角
    contentPadding: 10, // 区域内边距
    contentInputRadius: 3, // 输入框圆角
    contentInputSpacing: 10, // 输入框间距
    // contentInputBgColor: '', // 信息输入背景色
    // contentTextBgColor: '', // 信息输入文字色
    
    successfulRegistration: "",
  });

const formRef = ref();

const rules = {
    winnerPopupUid: [
      { required: true, message: "请选择报名成功弹窗", trigger: "change" },
    ],
  };

const detail = computed({
  get: () => {
    return reactive(Object.assign({}, form.value, props.config,{$positionType:'relative'}));
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const winnerPopupList = computed(() => {
  return props.controlData.filter(
    (item) => item.type === "ToSignUpPopup" && (item.pageConfig.type === "successfulRegistration" || item.pageConfig.type === "richText")
  );
});

const initConfig = () => {
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `ToSignUp-${newRandomUid()}`;
    // 绑定报名成功弹窗
    if (winnerPopupList.value.length > 0) {
        detail.value.winnerPopupUid = winnerPopupList.value[0].uid;
      }
    else {
      let uid = newRandomUid();
      detail.value.winnerPopupUid = uid;
      emits("change", detail.value, {
        uid: uid,
        type: "ToSignUpPopup",
        name: "报名成功弹窗",
        pageConfig: {
          scene: "toSignUp",
        },
      });
    }

    // detail.value.failPopupUid = newRandomUid();
    // emits("change", detail.value, {
    //   uid: detail.value.failPopupUid,
    //   type: "FeedbackPopup",
    //   name: "挑战失败弹窗",
    //   pageConfig: {
    //     type: "fail",
    //     scene: "answer",
    //   },
    // });
    onChange();
  }
};

const onChange = (val, type) => {
  detail.value = detail.value;
};

// 表单校验
const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        if (
          !winnerPopupList.value.find((item) => item.uid === detail.value.winnerPopupUid)
        ) {
          detail.value.winnerPopupUid = "";
          reject(`${props.name}未绑定报名成功弹窗`);
        }

        resolve();
      } else
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
    });
  });
};
const setIsView = ()=> {
  console.log('[ detail.value.isView ]', detail.value.isView)
  detail.value.isView = !detail.value.isView
  onChange()
}

// 组件移除(同时移除抽奖机会和奖池)
const remove = (pagelist) => {
  let btnIndex = pagelist.findIndex((item) => item.uid === detail.value.answerBtnUid);
  pagelist.splice(btnIndex, 1);
};

onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});

defineExpose({ check, remove });
</script>
<template>
  <el-form ref="formRef" :model="detail" :rules="rules" label-width="auto">
    <el-form-item label="报名信息填写:" prop="signUpInformation">
      <el-switch
        v-model="detail.signUpInformation"
        :inactive-value="0"
        :active-value="1"
        inline-prompt
        active-text="是"
        inactive-text="否"
        @change="onChange"
      /> 
      <el-tooltip
        
        effect="dark"
        content="不添加报名信息则默认收集用户的登录手机号信息"
        placement="top"
      >
        <el-icon style="margin-left: 5px;" color="#aaa" size="16px"><InfoFilled /></el-icon>
      </el-tooltip>
    </el-form-item>

    <el-form-item v-show="detail.signUpInformation == 1" label="弹出框报名信息" prop="signUpInformationPopup">
      <el-switch
        v-model="detail.signUpInformationPopup"
        :inactive-value="0"
        :active-value="1"
        inline-prompt
        active-text="是"
        inactive-text="否"
        @change="onChange"
      /> 
      <div class="_icon_eyes" v-show="detail.signUpInformation == 1">
        <el-tooltip
        effect="dark"
        content="显示弹窗"
        placement="top"
      >
        <el-icon v-show="!detail.isView" @click="setIsView" color="#aaa" size="16px"><View /></el-icon>
      </el-tooltip>

      <el-tooltip
        effect="dark"
        content="关闭弹窗"
        placement="top"
      >
        <el-icon v-show="detail.isView" @click="setIsView" color="#aaa" size="16px"><Hide /></el-icon>
      </el-tooltip>
        
        
      </div>
    </el-form-item>

  </el-form>
  <div class="tab-container">
    <div
      class="tab-item"
      :class="{ active: detail.activeName == 0 }"
      @click="()=>{detail.activeName = 0; onChange()}"
    >
      <div class="img">
        <img :src="detail.signUpButtonBg" alt="" />
        <!-- <div
          v-else-if="detail.bgColor"
          class="color-block"
          :style="{ backgroundColor: detail.bgColor }"
        ></div> -->
      </div>
      <div class="name">报名按钮</div>
    </div>
    <div
      class="tab-item"
      :class="{ active: detail.activeName == 1 }"
      @click="()=>{detail.activeName = 1; onChange()}"
    >
      <div class="img">
        <img :src="detail.signUpSuccessButtonBg" alt="">
      </div>
      <div class="name">报名完成按钮</div>
    </div>
  </div>

  <div class="tab-panel" v-show="detail.signUpInformation == 1">
    <div>
      <AlphaColor v-model="detail.contentBgColor" name="区域背景色" @change="onChange" />
      <!-- <AlphaColor v-model="detail.contentInputBgColor" name="信息输入背景色" @change="onChange" />
      <AlphaColor v-model="detail.contentTextBgColor" name="信息输入文字色" @change="onChange" /> -->
      <Slider
        v-model="detail.contentPadding"
        name="区域内边距"
        :min="0"
        :max="50"
        @change="onChange"
      />
      <Slider
        v-model="detail.contentRadius"
        name="区域圆角"
        :min="0"
        :max="50"
        @change="onChange"
      />
      <Slider
        v-model="detail.contentInputRadius"
        name="输入框圆角"
        :min="0"
        :max="50"
        @change="onChange"
      />
      <Slider
        v-model="detail.contentInputSpacing"
        name="输入框间距"
        :min="0"
        :max="50"
        @change="onChange"
      />
    </div>
  </div>
  <OImage
      v-show="detail.activeName == 0"
      v-model="detail.signUpButtonBg"
      v-model:size="detail.signUpButtonSize"
      name="报名按钮"
      @change="onChange"
    />
    <OImage
      v-show="detail.activeName == 1"
      v-model="detail.signUpSuccessButtonBg"
      v-model:size="detail.signUpSuccessButtonSize"
      name="报名完成按钮"
      @change="onChange"
    />
</template>
<style lang="scss" scoped>
.form-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  .name {
    font-size: 14px;
  }
  .setting {
    margin-left: 20px;
  }
}
.img {
  width: 124px;
  height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-radius: 10px;
  border: 1px solid #999;
  overflow: hidden;
  background-position: 0 0, 15px 15px;
  background-size: 10px 10px;
  background-image: linear-gradient(
      45deg,
      #ccc 25%,
      transparent 0,
      transparent 75%,
      #ccc 0
    ),
    linear-gradient(45deg, #ccc 25%, transparent 0, transparent 75%, #ccc 0);
}
.tab-container {
  display: flex;
  flex-wrap: wrap;
  .tab-item {
    margin-right: 10px;
    cursor: pointer;
    user-select: none;
    img {
      display: block;
      width: 80%;
      height: 80%;
      object-fit: contain;
      margin: 0 auto;
    }
    .color-block {
      width: 80%;
      height: 30%;
    }
    .name {
      text-align: center;
      margin-top: 5px;
    }
    .option-item {
      width: 80%;
      height: 30px;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      position: relative;
      font-size: 12px;
      img {
        display: block;
        width: 15px;
        height: 15px;
        position: absolute;
        right: 10px;
        top: 8px;
      }
    }
    &.active {
      .img {
        border-color: var(--el-color-primary);
      }
      .name {
        color: var(--el-color-primary);
      }
    }
  }
}
.tab-panel {
  margin-top: 10px;
}
._icon_eyes {
  display: flex;
  margin-left: 5px;
  align-items: center;
  .el-icon {
    cursor: pointer;
  }
}
</style>
